<template>
  <select id="select" @change="handleChange($event)">
    <option value="None" >选择添加</option>
    <option value="Point">点</option>
    <option value="LineString">线</option>
    <option value="Polygon">面</option>
  </select>
</template>
<script setup>
import { inject, onMounted,onBeforeUnmount } from 'vue'
let $map
var docLayer = new Zondy.Map.Doc('', 'gis_plr', {})
var source = new ol.source.Vector({})
var layer = new ol.layer.Vector({
  source,
})
onMounted(() => {
  $map = inject('$map')
  $map.addLayer(layer)
  $map.addLayer(docLayer)
})
//初始画笔
let draw
//添加要素的函数
function handleChange(evt) {
  console.log('jinlai1222')
  //获取绘制要素的类型
  var type = evt.target.value
//清除上一次的画笔
  if (draw) {
    $map.removeInteraction(draw)
  }
  if (type == 'None') {
    source.clear()
    return
  }
  //绘制要素
  draw = createDraw({
    type,
    source,
    //向数据库添加数据
    callback: addFeature,//回调函数
  })
  $map.addInteraction(draw)
}
function addFeature(evt) {
  const type = evt.target.mode_
  //switch语句
  switch (type) {
    case 'Point':
      var position = evt.feature.getGeometry().getCoordinates()
      console.log(position)
      var service = {
        name: 'gis_plr',
        layerId: 2,
      }
      /* 调用中地接口-添加点要素 */
      Point.add({
        position,
        service,
        docLayer,
      })
      source.clear()
     
      break
    case 'LineString':
      var position = evt.feature.getGeometry().getCoordinates()
      console.log(position)
      var attr = []
      var service = {
        name: 'gis_plr',
        layerId: 1,
      }
      /* 调用中地接口-添加线要素 */
      LineString.add({
        position,
        attr,
        service,
        docLayer,
      })
      source.clear()
     
      break
    case 'Polygon':
      var position = evt.feature.getGeometry().getCoordinates()[0]
      console.log('position')
      var service = {
        name: 'gis_plr',
        layerId: 0,
      }
      var attr = []
      Area.add({
        position,
        attr,
        service,
        docLayer,
      })
      source.clear()
     
      break
  }

}
onBeforeUnmount(() => {
  console.log("进来了")
  $map.removeInteraction(draw)
})
</script>
<style scoped>
#select{
  position: fixed;
  top: 30px;
  left: 80px;
  width: 80px;
  height: 30px;
}
</style>
